<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>东风雪铁龙-订单详情</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
  <!-- 兼容国产浏览器的高速模式 -->
  <meta name="renderer" content="webkit"/>
  <meta name="Author" content="fans_m@163.com" />
  <meta name="Keywords" content="会腾软件" />
  <meta name="Description" content="会腾定制" />

  <style type="text/css">
    html,body{
      width: 100%;
      height: 100%;
      margin:0;
      padding:0;
      min-width: 1200px;
    }
    .mainBox{
      width:100%;
      height: 100%;
      background: url('images/PC(4)/order/bg.png') 0 0 no-repeat;
      background-size: 100% 100%;
    }
    .mainTop{
      width:100%;
      height: 80px;
      background: url(images/topBtn.png) 0 0 no-repeat;
      background-size: 100% 100%;
      margin:0;
      padding:0;
      list-style: none;
    }
    .mainTop li{
      float: left;
      width:19.7%;
      height: 35px;
      border-right: 1px solid #ccc;
      margin-top: 22.5px;
    }
    .mainTop li.topBtn{
      width:12%;
      cursor: pointer;
    }
    .mainTop li.topBtn p{
      margin:0;
      padding:0;
      width:100%;
      text-align: center;
    }
    .mainTop li.topBtnAct p{
      color:#148CB4;
    }
    .mainTop li:first-child img{
        margin-left: 15%;
        margin-top: 10px;
    }
    .mainTop li:last-child{
      border-right: 0;
    }
    .mainTop li:last-child img{
      float: right;
      margin-right: 15%;
      margin-top: 3px;
      width:50px;
    }
    .returnBox{
      width: 8.5%;
      position: absolute;
      bottom: 60px;
      right: 7.5%;
    }
    .returnBox img{
      width:100%;
      cursor: pointer;
    }
    .phoneBox{
      height: 45px;
      background: #148CB4;
      border-radius: 5px;
      position: absolute;
      bottom: 1px;
      right: 7.5%;
      padding:0 20px;
      color: #fff;
    }
    .phoneBox p a {
        color: #fff;
        text-decoration: none;
        margin-right: 10px;
    }
    .infoBox{
      position: absolute;
      top:40%;
      left: 50%;
      transform: translate(-50%,-40%);
      width:46%;
      overflow: hidden;
      background: #fff;
      border-radius: 9px;
      padding-bottom: 10px;
      border: 1px solid #b9b9cd;
      border-radius: 17px 17px 5px 5px;
    }
    .title {
      width: 100%;
      height: 40px;
      background: #148CB4;
      border-radius: 10px 10px 0 0;
      color: #fff;
      line-height: 40px;
    }
    .title img {
      height: 25px;
      margin-left: 15px;
      vertical-align: top;
      margin-top: 8px;
    }
    .title span {
      font-size: 18px;
      margin-left: 10px;
    }
    .warning {
        width: 86%;
        margin-left: 7%;
        border-top: 1px solid #DC002E;
        padding: 0;
        font-size: 12px;
        text-align: left;
        padding-top: 5px;
        margin-top: 25px;
    }
    .moduleBox {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.7);
        display: none;
    }
    .imgBox {
        width: 40%;
        overflow: hidden;
        position: absolute;
        top: 120px;
        left: 30%;
        padding-top: 25px;
        background: url("images/codeBg.png") 0 0 no-repeat;
        background-size: 100% 100%;
        height: 450px;
       }
    }
    .imgBox .moduImg {
        width: 100%;
    }
    .delete {
        width: 25px;
        position: absolute;
        top: 5px;
        right: 5px;
        cursor:pointer;
    }
    .makeSure {
        width: 150px;
        height: 45px;
        background: #148CB4;
        text-align: center;
        line-height: 45px;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        margin:0px auto 10px;
    }
    .orderTable{
      width:86%;
      overflow: hidden;
      border-collapse: collapse;
      margin-left: 7%;
    }
    .orderTable tr td,.orderTable tr th{
      border-bottom: 1px solid #ccc;
      text-align:left;
      font-size:16px;
      padding:5px 0;
      height: 30px;
    }
    .pay{
      width:86%;
      overflow: hidden;
      margin:0;
      padding:0;
      margin-left: 7%;
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .pay div,.pay li{
      width:100%;
      height: 40px;
      line-height: 40px;
      list-style: none;
      border-bottom: 1px solid #ccc;
    }
    .pay li img{
      height:25px;
      vertical-align: top;
      margin-top:2.5px;
    }
    .pay li label{
      font-size:14px;
      display: inline-block;
      width:100px;
      margin-right: 5px;
      margin-left: 5px;
      vertical-align: top;
      margin-top: -5px;
      cursor: pointer;
    }
    .pay li input{
      vertical-align: top;
     margin-top: 8px;
    }
  </style>
</head>
<body>
  <div class="mainBox">
    <ul class="mainTop">
      <li>
        <img src="images/logo1.png"/>
      </li>
      <li class="topBtn " dir="1">
        <p>活 动 信 息</p>
        <p>你·掌舵人</p>
      </li>
      <li class="topBtn " dir="2">
        <p>场 地 信 息</p>
        <p>你·探索家 </p>
      </li>
      <li class="topBtn" dir="3">
        <p>友 情 提 示</p>
        <p>你·守护者 </p>
      </li>
      <li class="topBtn " dir="4">
        <p>直 播 通 道</p>
        <p>你·视听控</p>
      </li>
      <li class="topBtn topBtnAct" dir="5">
        <p>参 会 报 名 </p>
        <p>你·行动派</p>
      </li>
      <li>
        <img src="images/logo2.png"/>
      </li>
    </ul>
    <div class="infoBox">
      <div class="title">
         <img src="images/PC(4)/order/icon1.png"/>
         <span>订单详情</span>
      </div>
      <table class="orderTable">
          <thead>
            <tr>
              <th>名称</th>
              <th>单价</th>
              <th>数量</th>
              <th>总价</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>单人房间费</td>
              <td>900</td>
              <td>1</td>
              <td>900.00</td>
            </tr>
            <tr>
              <td colspan="3" style="text-align:left;">合计金额</td>
              <td style="text-align:left;">900.00</td>
            </tr>
          </tbody>
       </table>
       <ul class="pay">
        <div>支付方式</div>
         <li>
           <input type="radio" name="pay" checked="checked" id="wechat">
           <label for="wechat">微信（推荐）</label>
           <img src="images/PC(4)/order/icon2.png"/>
         </li>
         <li style="border-bottom:1px solid #148CB4 ;">
           <input type="radio" name="pay" id="alipay"/>
           <label for="alipay">支付宝</label>
           <img src="images/PC(4)/order/icon3.png"/>
         </li>
       </ul>
       <p style="width: 74%;margin-left:13%;font-size:13px;">*如需银行卡转账支付，请在转账的时候备注（姓名+联系方式+单人间/双人间）<br> 银行信息：招商银行  殷豪  6226 0902 </p>
       <div class="makeSure">确认提交</div>

    </div>
    <!-- 个人中心 -->
    <div class="returnBox">
       <img src="images/actinfo/signup.png" class="mettingP"/>
       <img src="images/actinfo/home.png" class="return"/>
     </div>
    <div class="phoneBox">
       <p style="margin-left: 20px;">会务组联系方式：<a href="tel:15821133060">158-2113-3060</a><a href="tel:15921658801">159-2165-8801</a></p>
     </div>
  </div>

  <!-- 弹窗 -->
  <div class="moduleBox" style="display: block;">
     <div class="imgBox">
      <div class="codeIbox" style="width:200px;overflow:hidden;margin:30px auto 0;">
           <h4 style="width:100%;text-align: center;margin:10px 0;">扫一扫付款(元)</h4>
           <h3 style="width:100%;text-align: center;font-size:24px;color:#009236;margin:10px 0;">0.01</h3>
           <div style="width:98%;overflow:hidden;border:1px solid #000;">
            <img src="images/PC(4)/personal/code.png" class="moduImg" width="100%;" />
            <p style="margin:0;">
              <img src="images/1348.png" style="margin-left: 10px;width:45px;">
              <span style="display: inline-block;vertical-align: top;line-height: 1.5;">
                打&nbsp;开&nbsp;手&nbsp;机&nbsp;微&nbsp;信<br/>&nbsp;扫一扫继续付款
              </span>
            </p>
          </div>
          <p style="maring:0;width:100%;text-align: center;font-size:12px;color:gray;">首次使用请下载手机微信</p>
      </div>
       <img src="images/delete.png" class="delete"/>
     </div>
  </div>

  <script src="js/jquery.js"></script>

  <!-- Initialize Swiper -->
  <script>
    <!-- 顶部导航选中 -->
    $(".topBtn").click(function(){
      $(this).addClass('topBtnAct').siblings().removeClass('topBtnAct');
      var dir=$(this).attr("dir");
      if(dir == "1"){
        window.location.href='actinfo.html';
      }else if(dir == "2"){
        window.location.href='siteinfo.html';
      }else if(dir == "3"){
        window.location.href='hints.html';
      }else if(dir == "4"){
        window.location.href='live.html';
      }else if(dir == "5"){
        window.location.href='partici.html';
      }
    });
    // 经销商报名
    $(".dealerRegister").click(function(){
      window.location.href="dealer.html";
    });
    // 合作伙伴报名
    $(".partnerRegister").click(function(){
      window.location.href="partner.html";
    });
    // dacd报名
    $(".dacdRegister").click(function(){
      window.location.href="dacd.html";
    })


    //返回首页
    $(".return").click(function(){
      window.location.href="index.html"
    })
    //参会报名
    $(".mettingP").click(function(){
      window.location.href="partici.html";
    })

    // 隐藏弹窗
    $(".delete").click(function(){
      $(".moduleBox").hide();
    })
    // 二维码扫描
    function scode(){
      $(".moduleBox").show();
    }


  </script>
</body>
</html>
